<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		.xtop{width: 650px;height: 120px;background-color: #eee;border: 1px solid #cdc8ce;position: absolute;left: 50%;top: 20%;transform: translate(-50%,-50%) ;}
		.xiang{width: 700px;height: 400px;border: 1px solid #cdc8ce;border-radius: 10px;position: absolute;left: 50%;top: 50%;
			transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);background-color: #eee;}
		.door_out{width: 551px;height: 371px;border: 1px solid #cdc8ce;border-radius: 10px;float: right;margin-right: 15px;margin-top: 15px;}
		

		.door{width: 500px;height: 320px;border: 1px solid #cdc8ce;padding: 20px;border-radius: 10px;margin-left: 5px;margin-top: 5px;}
		.rotz{animation: vanishIn 1s ease-out normal;-webkit-animation: vanishIn 1s ease-out normal;}
		@-webkit-keyframes vanishIn {
			0% {-webkit-transform-origin: 50% 50%;-webkit-transform: rotate(0deg);}
			100% {-webkit-transform-origin: 50% 50%;-webkit-transform: rotate(-720deg);}
		}
		@keyframes vanishIn {
			0% {transform-origin: 50% 50%;transform: rotate(0deg);}
			100% {transform-origin: 50% 50%;transform: rotate(-720deg);}
		}
		
		.show{width: 230px;height: 270px;float: left;margin-top: 12px;}
		.showwin{background-color: #cdc8ce;display: block;height: 26px;line-height: 26px;padding: 8px;color: #fff;font-size: 22px;border-radius: 12px;}
		.boll{width: 200px;height: 200px;background-color: #cdc8ce;border-radius: 50%;position: relative;left: 20px;top: 30px;}
		.bollpoint{width: 8px;height: 8px;border-radius: 50%;background-color: #666;position: absolute;left: 180px;top: 96px}

		.keybord{background-color: #cdc8ce;width: 200px;height: 270px;padding: 10px;border-radius: 20px;float: right;margin-top: 12px;}
		.number{margin: 10px;width: 46px;height: 46px;border-radius: 50%;background-color: #fff;text-align: center;float: left;line-height: 46px;cursor: pointer;}
	</style>
</head>
<body>
<div class="xtop"></div>
<div class="xiang">
<div class="door_out">
	<div class="door">
		<div class="show">
			<span class="showwin">123</span>
			<div class="boll"><div class="bollpoint"></div></div>
		</div>
		<div class="keybord">
			<div class="number">1</div>
			<div class="number">2</div>
			<div class="number">3</div>
			<div class="number">4</div>
			<div class="number">5</div>
			<div class="number">6</div>
			<div class="number">7</div>
			<div class="number">8</div>
			<div class="number">9</div>
			<div class="number" style="color: #e00;">*</div>
			<div class="number">0</div>
			<div class="number" style="color: #0e0;">#</div>
		</div>
	</div>
</div>
</div>
	<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
	<script>
		var arr = [];
		$(document).ready(function(){
			$(".boll").addClass("rotz");
		})
		$(".number").mousedown(function(){
			$(this).css("background-color","#eee");
		})
		$(".number").mouseup(function(){
			$(this).css("background-color","#fff");
		})
		$(".number").click(function(){
			var txt = $(this).text();
			arr.push(txt);

			$(".showwin").text(arr);
			console.log(arr)
		})
	</script>
</body>
</html>